<template>
  <div class="nav">
    <div class="nav-version">{{ $version }}</div>
    <div class="nav-left">
      <div
        class="nav-left-item"
        v-for="(item, index) in navList.slice(0, 3)"
        :key="index"
        :class="{active: item.path === path}"
        @click="selectNavList(index, item)"
      >
        <span class="nav-left-item-title"> {{ item.title }}</span>
      </div>
    </div>
    <div class="nav-con" @click="selectNavCon()">
      <img src="@/assets/img/home/logo.png" alt="" />
      <p>青海无人机综合管理服务平台</p>
    </div>
    <div class="nav-right">
      <div
        class="nav-right-item"
        v-for="(item, index) in navList.slice(3)"
        :key="index"
        :class="{
          active: item.path === path || isPathInMenu(item, path),
        }"
        @click="selectNavList(index, item)"
      >
        <span v-if="item.isMenu" class="nav-right-item-title" :ref="item.path">{{ item.title }}</span>
        <span v-else class="nav-right-item-title"> {{ item.title }}</span>
        <span v-if="item.path === 'msgCenter' && store.state.messageCount > 0" class="msg-num">{{
          store.state.messageCount > 99 ? '99+' : store.state.messageCount
        }}</span>
      </div>
      <!-- 版本号信息 -->
    </div>

    <teleport to="body">
      <comUserInfo class="my-center-user" v-if="isShowUserInfo" @close="isShowUserInfo = false"></comUserInfo>
      <comMsgCenter class="my-center-modal" v-if="isShowMsgModal" @close="isShowMsgModal = false"></comMsgCenter>
    </teleport>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, getCurrentInstance, ref, watch, onUnmounted} from 'vue';
import {useRouter} from 'vue-router';
import {useStore} from 'vuex';
import comUserInfo from '@/components/comUserInfo/comUserInfo.vue';
import comMsgCenter from '@/components/comMsgCenter/comMsgCenter.vue';
import personalApi from '@/api/personalApi';
import webSocket from '@/utils/websocket';

interface NavItem {
  isMenu?: boolean; // 是否为菜单。默认为路由跳转
  path: string; // 路由path 或 菜单名称
  title?: string; // 路由名称
  list?: string[]; // 包含的页面。包含时高亮当前菜单
}

const $version = getCurrentInstance()?.appContext.config.globalProperties.$version;

// const userInfo = JSON.parse(localStorage.getItem('userInfo'));

const store = useStore();

const navList = ref<NavItem[]>([
  {
    path: '/unitManage',
    title: '单位管理',
  },
  {
    path: '/userManage',
    title: '用户管理',
  },
  {
    path: '/deviceManage',
    title: '设备管理',
  },
  {
    path: '/comprehensiveCensus',
    title: '综合统计',
  },
  {
    isMenu: true,
    path: 'msgCenter',
    title: '消息中心',
    list: ['/msgCenter'],
  },
  {
    isMenu: true,
    path: 'userInfo',
    title: '个人中心',
    list: ['/myInfo', '/account'],
  },
]);
const isPathInMenu = (menuItem: NavItem, currentPath: string) =>
  menuItem.isMenu && menuItem.list && menuItem.list.includes(currentPath);
const path = ref<string>('');
const router = useRouter();

const selectNavList = (index: any, item: NavItem) => {
  path.value = item.path;
  if (item.isMenu) {
    handleMenu(item);
  } else {
    router.push(path.value);
  }
};
const selectNavCon = () => {
  path.value = '';
  router.push('/');
};

const watchRoute = () => {
  watch(
    () => router.currentRoute.value.path,
    (val) => {
      if (path.value !== val) {
        path.value = val;
      }
    },
  );
};
// 获取未读消息数量
const getMsgUnread = () => {
  personalApi
    .newsUnread()
    .then((res) => {
      if (res.status === 0) {
        store.commit('setMessageCount', res.data);
      }
    })
    .catch((err) => {
      throw err;
    });
};
// 获取消息推送, 并保持心跳
const wsInterval = ref(null);
const getNotification = () => {
  webSocket.wsInit();
  wsInterval.value = setInterval(() => {
    webSocket.wsHeartbeat();
  }, 15000);
};
const isShowUserInfo = ref(false);
const handleMenu = (menuItem: NavItem) => {
  switch (menuItem.path) {
    case 'userInfo':
      showUserModal();
      break;
    case 'msgCenter':
      showMsgModal();
      break;
    default:
      console.error('菜单未定义');
  }
};
const showUserModal = () => {
  isShowUserInfo.value = !isShowUserInfo.value;
};

const isShowMsgModal = ref(false);
const showMsgModal = () => {
  isShowMsgModal.value = !isShowMsgModal.value;
};

onMounted(() => {
  path.value = router.currentRoute.value.path;
  watchRoute();
  getMsgUnread();
  getNotification();
});
onUnmounted(() => {
  // 取消socket心跳
  clearInterval(wsInterval.value);
});
</script>

<style lang="scss" scoped>
$navItemHeight: 50px;
$navHeight: 78px;
.nav {
  height: $navHeight;
  display: flex;
  align-items: center;
  z-index: 999;
  background: url(@/assets/img/home/bg.png);
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  &-version {
    color: #fff;
    position: absolute;
    right: 20px;
    bottom: 10px;
  }
  &-left {
    flex: 1;
    height: $navHeight;
    display: flex;
    align-items: center;
    justify-content: center;
    &-item {
      width: 121px;
      margin-top: 14px;
      height: $navItemHeight;
      line-height: $navItemHeight;
      text-align: center;
      cursor: pointer;
      &-title {
        color: #fff;
        text-decoration: none;
      }
    }
    .active {
      font-weight: bold;
      background: url(@/assets/img/home/active_left.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
  &-con {
    display: flex;
    align-items: center;
    min-width: 300px;
    justify-content: center;
    margin-bottom: 10px;
    cursor: pointer;
    > img {
      width: 36px;
      height: 36px;
      margin-right: 14px;
    }
    > p {
      min-width: 200px;
      font-size: 26px;
      font-weight: bold;
      color: #ffffff;
      line-height: 31px;
    }
  }
  &-right {
    flex: 1;
    height: $navHeight;
    display: flex;
    align-items: center;
    justify-content: center;
    &-item {
      width: 121px;
      margin-top: 14px;
      height: $navItemHeight;
      line-height: $navItemHeight;
      text-align: center;
      cursor: pointer;
      position: relative;
      &-title {
        color: #fff;
        text-decoration: none;
      }
      .msg-num {
        position: absolute;
        top: 6px;
        right: 3px;
        width: 20px;
        height: 20px;
        background: #fb4011;
        border-radius: 50%;
        color: #fff;
        font-size: 10px;
        line-height: 20px;
        text-align: center;
      }
    }
    .active {
      font-weight: bold;
      background: url(@/assets/img/home/active_right.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
}
.my-center-modal {
  position: absolute;
  top: $navHeight + 20px;
  right: 5.16%;
  z-index: 9999;
}
.my-center-user {
  position: absolute;
  top: $navHeight + 20px;
  right: 4.27%;
  z-index: 9999;
}
</style>
